<template>
  <div class="app-container">
    <el-steps
      :active="active_state_index"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step
        v-for="state in states_for_show"
        :key="state.value"
        :title="state.name"
      />
    </el-steps>

    <div>---------------------------</div>

    <el-button-group>
      <el-button
        v-for="action in actions_for_show"
        :key="action.value"
        :type="action.type"
        style="margin-top:-23px"
        @click="do_action(action.value)"
      >
        {{ action.name }}
      </el-button>
    </el-button-group>

    <div>---------------------------</div>
  </div>
</template>

<script>
import odoo from '@/odooapi'

export default {
  name: 'TestWorkflow',
  components: {},
  directives: {},
  filters: {},

  props: {
    activeState: {
      type: Object,
      default: () => {
        return { value: 'draft' }
      }
    },
    workflowConfigs: { type: Object, default: () => {} },
    detailData: { type: Object, default: () => {} }
  },

  data() {
    return {
      Model: undefined
    }
  },

  computed: {
    active_state: function() {
      return this.activeState
    },

    actions_for_show: function() {
      return this.actions_to_show()
    },

    active_state_index: function() {
      return this.states_to_show().active_state_index
    },

    states_for_show: function() {
      return this.states_to_show().states
    }
  },

  watch: {},

  async created() {
    this.Model = odoo.env(this.modelName)
  },

  methods: {
    actions_to_show() {
      const actions1 = this.workflowConfigs.transfers[this.active_state.value]
        .actions

      const actions2 = actions1.map(value => {
        return { ...this.workflowConfigs.actions[value], value }
      })

      const actions3 = actions2.filter(item => {
        if (typeof item.hidden === 'function') {
          const hidden = item.hidden({
            self: this.Model,
            record: this.detailData
          })
          return !hidden
        }

        return !item.hidden
      })

      const actions = actions3

      return actions
    },

    states_to_show() {
      let states_list = this.workflowConfigs.transfers[this.active_state.value]
        .states

      // TBD,  odoo dont write last state
      // so i can know last state
      if (!Array.isArray(states_list)) {
        if (this.active_state.last) {
          states_list = states_list[this.active_state.last]
        } else {
          states_list = Object.values(states_list)[0]
        }
      }
      const states = states_list.map((value, index) => {
        return {
          index: index + 1,
          value,
          name: this.workflowConfigs.states[value]
        }
      })

      const ret = { states }

      states.forEach(item => {
        if (item.value === this.active_state.value) {
          ret.active_state_index = item.index
        }
      })

      return ret
    },

    do_action(doing) {
      const active_state = { value: doing, last: this.active_state.value }

      // 特定的操作 可能需要将 额外的参数传到服务端
      // 这种情况许特事特办
      this.$emit('change', active_state)
    }
  }
}
</script>
